import { useEffect, useRef } from "react"
import * as echarts from "echarts"

export default function Bar({ title, xData, yData }) {
  const barRef = useRef(null)
  const myChart = useRef(null)

  const resizeChart = () => {
    myChart.current && myChart.current.resize()
  }

  useEffect(() => {
    setTimeout(() => {
      myChart.current = echarts.init(barRef.current)
      myChart.current.setOption({
        title: { text: title },
        tooltip: {},
        xAxis: { data: xData },
        yAxis: {},
        series: [{ name: "销量", type: "bar", data: yData }]
      })
    }, 100)
    return () => {
      window.removeEventListener("resize", resizeChart)
    }
  }, [title, xData, yData])

  window.addEventListener("resize", resizeChart)

  return <div ref={barRef}></div>
}
